<template>
    <html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="framework/reset.css" rel="stylesheet" />
		<link href="css/editUserAddress.css" rel="stylesheet" />
		<title>饿了么 编辑送货地址</title>
	</head>
	<body>
		<div class="wrapper">
		
			<!-- header部分 -->
			<header>
				<p>编辑送货地址</p>
			</header>
			
			<!-- 表单部分 -->
			<ul class="form-box">
				<li>
					<div class="title">
						联系人：
					</div>
					<div class="content">
						<input type="text" placeholder="联系人姓名" v-model="deliveryaddress.contactName">
					</div>
				</li>
				<li>
					<div class="title">
						性别：
					</div>
					<div class="content" style="font-size: 3vw;">
						<input type="radio" name="sex" style="width:6vw;height:3.2vw;" checked value="1" v-model="deliveryaddress.contactSex">男
						<input type="radio" name="sex" style="width:6vw;height:3.2vw;" value="0" v-model="deliveryaddress.contactSex">女
					</div>
				</li>
				<li>
					<div class="title">
						电话：
					</div>
					<div class="content">
						<input type="tel" placeholder="电话" v-model="deliveryaddress.contactTel">
					</div>
				</li>
				<li>
					<div class="title">
						收货地址：
					</div>
					<div class="content">
						<input type="text" placeholder="收货地址" v-model="deliveryaddress.address">
					</div>
				</li>
			</ul>
			
			<div class="button-add">
				<button  @click="toUserAddress">更新</button>
			</div>
			
			<!-- 底部菜单部分 -->
			<ul class="footer">
				<li onclick="location.href='index.html'">
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li onclick="location.href='orderList.html'">
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>
		</div>
	</body>
</html>

</template>
<script>
export default {
    data(){
		return{
			businessId:this.$route.query.businessId,
		    daId:this.$route.query.daId,
		    user:{},
		    deliveryaddress:{
			contactName: null,
            contactSex: 1,
            contactTel: null,
            address: null,
            userId: null
		}

		}
		

	},
	methods:{
		//根据daId查询地址信息
		getDeliveryAddressById(daId){
			this.$axios.post('DeliveryAddressController/getDeliveryAddressById',this.$qs.stringify({
				daId:this.daId
			})).then(response => {
				   this.deliveryaddress=response.data
				}).catch(error => {
					console.error("失败");
				})
		},
		//修改并跳转
		toUserAddress() {
				//修改
				this.$axios.post('DeliveryAddressController/updateDeliveryAddress', this.$qs.stringify(
					this.deliveryaddress
				)).then(response => {
					if (response.data == 1) {
						alert("地址修改成功！");
						// 页面跳转
						this.$router.push({
							path: '/userAddress',
							query: {
								businessId: this.businessId,
							}
						})
					} else {
						alert("地址修改失败！");
					}
				}).catch(error => {
					console.error(error);
				});
			}

	},
	created(){
		this.user=this.$getSessionStorage('user');
		this.getDeliveryAddressById(this.daId)
	}
}
</script>
<style scoped>
/*************** 总容器 ***************/
.wrapper {
	width: 100%;
	height: 100%;
}

/*************** header ***************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	/*保证在最上层*/
	z-index: 1000;
}

/*************** （表单信息） ***************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0vw 3vw;
	display: flex;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;

	display: flex;
	align-items: center;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .button-add {
	box-sizing: border-box;
	padding: 4vw 3vw 0vw 3vw;
}

.wrapper .button-add button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;

	border: none;
	outline: none;
	border-radius: 4px;
	color: #fff;
	background-color: #38CA73;
}

/*************** footer ***************/
.wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	position: fixed;
	left: 0;
	bottom: 0;
	/*保证在最上层*/
	z-index: 1000;
	background-color: #fff;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .footer li {
	/*li本身的尺寸完全由内容撑起*/
	user-select: none;
	cursor: pointer;
	color: #999;

	/*主轴方向设为column，然后每个子元素才能垂直水平都居中*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wrapper .footer li i {
	font-size: 5vw;
}

.wrapper .footer li p {
	font-size: 2.8vw;
}

</style>